<template>
	<el-descriptions class="margin-top" title="公众监督数据详情" :column="1" border style="margin-top: 20px;">
		<template #extra>
			<el-button type="primary" @click="goBack()">返回</el-button>
		</template>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<user />
					</el-icon>
					公众监督反馈信息编号
				</div>
			</template>
			{{feedback.afId}}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<iphone />
					</el-icon>
					反馈者信息
				</div>
			</template>
			<el-tag size="small">{{feedback.realName}}</el-tag>
			<el-tag size="small">{{feedback.sex==1?"男":"女"}}</el-tag>
			<el-tag size="small">{{feedback.birthday}}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<location />
					</el-icon>
					反馈者联系电话
				</div>
			</template>
			{{feedback.telId}}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<tickets />
					</el-icon>
					反馈信息所在地址
				</div>
			</template>
			<el-tag size="small">{{feedback.provinceName}}</el-tag>
			<el-tag size="small">{{feedback.cityName}}</el-tag>
			<el-tag size="small">{{feedback.address}}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<office-building />
					</el-icon>
					反馈信息描述
				</div>
			</template>
			{{feedback.information}}
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<tickets />
					</el-icon>
					预估等级
				</div>
			</template>
			<el-tag size="small">{{feedback.chineseExplain}}级</el-tag>
			<el-tag size="small">{{feedback.aqiExplain}}</el-tag>
		</el-descriptions-item>
		<el-descriptions-item>
			<template #label>
				<div class="cell-item">
					<el-icon :style="iconStyle">
						<tickets />
					</el-icon>
					反馈日期时间
				</div>
			</template>
			<el-tag size="small">{{feedback.afDate}}</el-tag>
			<el-tag size="small">{{feedback.afTime}}</el-tag>
		</el-descriptions-item>
	</el-descriptions>

</template>

<script setup>
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		ref,
		inject
	} from "vue";
	const route = useRoute();
	const router = useRouter();
	const axios = inject("axios");

	const feedback = ref({});

	const loadData = () => {

		let url = "AqiFeedBack/feedbackInfo?afId=" + route.query.afId;
		axios.get(url, null).then((response) => {
			let r = response.data;
			if (r.ok) {
				feedback.value = r.data.feedBackInfo;
			}
		});
	}
	loadData();

	const goBack = () => {
		router.push("/feedbackList");
	}
</script>

<style>
	.el-descriptions .el-descriptions__header .el-descriptions__title {
		font-size: 25px;
	}

	.el-tag {
		margin-right: 10px;
	}
</style>